* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: bisque;
}

.nine-box {
  width: 186px;
  height: 186px;
  background-color: orchid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: rgb(255, 255, 255);

  div {
    width: 60px;
    height: 60px;
    margin: 1px;
    line-height: 60px;
    text-align: center;
  }

  div:nth-child(1) {
    background-color: #5e3414;
  }
  div:nth-child(2) {
    background-color: #1ba124;
  }
  div:nth-child(3) {
    background-color: #a08d20;
  }
  div:nth-child(4) {
    background-color: #a52062;
  }
  div:nth-child(5) {
    background-color: #d40e0e;
  }
  div:nth-child(6) {
    background-color: #2424b3;
  }
  div:nth-child(7) {
    background-color: #0e0707;
  }
  div:nth-child(8) {
    background-color: #7b8f33;
  }
  div:nth-child(9) {
    background-color: #6810b1;
  }
}

.face-container {
  h2, h3, h4, h5, h6, span {
    text-align: center;
    margin: 16px;
  }

  [class$='face'] {
    display: flex;
    width: 104px;
    height: 104px;

    margin: 16px;
    padding: 4px;

    background-color: #e7e7e7;
    object-fit: contain;

    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
      inset -5px 0 #d7d7d7;

    border-radius: 10%;

    .column {
      display: flex;
    }

    .pip {
      display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin: 4px;

      background-color: #333;
      box-shadow: inset 0 3px #111, inset 0 -3px #555;
    }
  }
}
